<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('单位') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <span class="color_494949 ft12 pr5">{{ translate('物资编码') }}：</span>
        <el-input
          v-model="searchInfo1"
          class="w164 mr10"
          :placeholder="translate('请输入物资编码')"
        />
        <span class="w70 color_494949 ft12 pr5">{{ translate('时间') }}：</span>
        <el-date-picker
          v-model="searchInfo2"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          value-format="YYYY-MM-DD"
        />
        <el-button class="settingBtn ml10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <el-table :data="tableData" :loading="loading">
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label=" ">
          <el-table-column :label="translate('单位')" prop="WHUnit" align="center" />
        </el-table-column>
        <el-table-column label=" ">
          <el-table-column :label="translate('物资编码')" prop="ItemCode" align="center" />
        </el-table-column>
        <el-table-column label=" ">
          <el-table-column :label="translate('库，架，层，位')" prop="WSCode" width="150" align="center" />
        </el-table-column>
        <el-table-column label="物资" align="center">
          <el-table-column :label="translate('类别')" prop="ItemCate" width="60" align="center" />
          <el-table-column :label="translate('名称及规格')" width="220" align="center">
            <template #default="{ row }">
              <div>{{ row.ItemName +'/'+ row.ItemSpec}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label=" ">
          <el-table-column :label="translate('计量单位')" prop="ItemUnit" align="center" />
          <el-table-column :label="translate('单价')" prop="Price" align="center" />
        </el-table-column>
        <el-table-column label="存放地点" prop="StorageLocation" width="100" align="center" />
        <el-table-column label="期初" align="center">
          <el-table-column :label="translate('数量')" prop="QC_Qty" align="center" />
          <el-table-column :label="translate('金额(元)')" prop="QC_Amt" align="center" />
        </el-table-column>
        <el-table-column label="收入" align="center">
          <el-table-column :label="translate('数量')" prop="SR_Qty" align="center" />
          <el-table-column :label="translate('金额(元)')" prop="SR_Amt" align="center" />
        </el-table-column>
        <el-table-column label="发出" align="center">
          <el-table-column :label="translate('数量')" prop="FC_Qty" align="center" />
          <el-table-column :label="translate('金额(元)')" prop="FC_Amt" align="center" />
        </el-table-column>
        <el-table-column label="账存" align="center">
          <el-table-column :label="translate('数量')" prop="ZC_Qty" align="center" />
          <el-table-column :label="translate('金额(元)')" prop="ZC_Amt" align="center" />
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { GetPageDataItemTZ } from '@/api/form'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  const  route  = useRoute()
  export default defineComponent({
    name: 'itemBooks',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        searchInfo1: '',
        searchInfo2: [],
        wheres: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        layout: 'total, sizes, prev, pager, next, jumper',
        headerCellStyle: {
          background: '#ffffff !important',
          color: '#000000',
        },
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      if(this.searchInfo2.length<=0 || !this.searchInfo2) {
        this.searchInfo2 = [this.getFirstDayOfMonthFormatted(),this.getLastDayOfMonth()]
      }
      this.getList()
    },
    methods: {
      getLastDayOfMonth() {
      // 创建一个当前日期的副本
          let date = new Date();

          // 设置日期为下个月的第一天（这样可以跳过本月所有日期）
          date.setDate(1);
          date.setMonth(date.getMonth() + 1);
          date.setDate(0); // 这会将日期设置为上一个月的最后一天

          // 格式化日期为 YYYY-MM-DD
          let year = date.getFullYear();
          let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1
          let day = String(date.getDate()).padStart(2, '0');

          return `${year}-${month}-${day}`;
      },
      getFirstDayOfMonthFormatted() {
            const today = new Date(); // 获取当前日期
            const year = today.getFullYear(); // 获取年份
            const month = today.getMonth(); // 获取月份（注意：0表示1月，11表示12月）
            const date = 1; // 设置日期为1（即当前月份的第一天）

            // 创建日期对象
            const firstDay = new Date(year, month, date);

            // 手动格式化日期为 YYYY-MM-DD
            const formattedDate = `${year.toString().padStart(4, '0')}-${(month + 1).toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
            return formattedDate;
        },
      translate(row) {
        return translate(row)
      },
      async getList() {
        this.wheres = ''
        console.log(this.searchInfo2)
        if (this.searchInfo || this.searchInfo1 || (this.searchInfo2 && this.searchInfo2.length>0)) {
          const arr = []
          this.searchInfo.trim() !== '' &&
            arr.push({
              name: 'WHUnit',
              value: this.searchInfo,
              displayType: 'like',
            })
          this.searchInfo1.trim() !== '' &&
            arr.push({
              name: 'ItemCode',
              value: this.searchInfo1,
              displayType: 'like',
            })
          this.searchInfo2 && this.searchInfo2.length>0 &&
            arr.push({
              name: 'CreateDate',
              value: this.searchInfo2[0],
              displayType: 'ThanOrEqual',
            })
          this.searchInfo2 && this.searchInfo2.length>0 &&
            arr.push({
              name: 'CreateDate',
              value: this.searchInfo2[1],
              displayType: 'LessOrequal',
            })
          this.wheres = JSON.stringify(arr)
        }
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: this.wheres,
          export: false,
          value: '',
        }
        const data = await GetPageDataItemTZ(params)
        if(data.code === '200') {
          this.tableData = data.data.rows
          this.total = data.data.total
        }
        console.log(this.tableData)
      },

      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .ml10 {
      margin-left: 10px;
    }

    .iconcommon {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: blue;
    }
    .iconcommon2 {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: red;
    }
    .alarm-warning-fill {
      color: red;
    }
    .add {
      margin-bottom: 10px;
      text-align: left;
    }
  }
</style>
